<!-- 参团页面 -->
<template>
    <view class="page" id="join_gbuy">
        <status-bar title="我要参团" :goHome="options.fromShare ? options.fromShare : 0"></status-bar>
        <backTop v-if="toTop"></backTop>
        <!-- 下单产品 start -->
        <template v-if="pageData">
            <view class="order_goods">
                <view class="shop flex-box align-center">
                    <!-- <text class="iconfont icon-dianpu"></text> -->
                    <image
                        v-if="pageData.data[0].shopLogo"
                        @error="pageData.data[0].shopLogo = ''"
                        :src="$imgUrls(pageData.data[0].shopLogo)"
                        mode="aspectFill"
                        class="shop-logo"></image>
                    <text v-else class="iconfont icon-dianpu"></text>
                    <text class="name">{{ pageData.data[0].shopName ? pageData.data[0].shopName : shopName }}</text>
                </view>
                <view class="agoods">
                    <view class="agoods_thumb">
                        <image :src="$imgUrls(gooodsData.img)" class="agoods_thumb_img" mode="aspectFill"></image>
                    </view>
                    <view class="agoods_info">
                        <view class="agoods_t">{{ gooodsData.name }}</view>
                        <view class="agoods_info_info">
                            <view class="price4">
                                ￥
                                <text class="price4_num">{{ gooodsData.open_group_price }}</text>
                            </view>
                            <view class="ff_a c_999999">x1</view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 团购用户 start -->
            <view class="gbuy_user mb_03">
                <view class="gbuy_user_timer" v-if="pageData.gameOver > 0">
                    <template v-if="pageData.missPeople > 0">
                        还差
                        <text class="c_ff4b4e">{{ pageData.missPeople }}</text>
                        人成团 &nbsp;剩余&nbsp;
                        <count-down txtColor="#EC3D00" fontSize="28" :time="parseInt(pageData.gameOver)"></count-down>
                    </template>
                    <template v-else>已满员啦</template>
                </view>
                <view class="gbuy_user_timer" v-else>
                    <text class="c_ff4b4e">拼团活动已经结束了，下次要积极一点哦</text>
                </view>
                <view class="gbuy_user_list">
                    <view class="gbuy_user_item" v-for="(head, index) in pageData.groupUsers" :key="index">
                        <image :src="$imgUrls(head.v_headimg)" class="gbuy_user_avatar" mode="aspectFill"></image>
                        <text class="tag color6" v-if="head.v_id == pageData.main_v_id">团长</text>
                    </view>
                </view>

                <!-- <view class="btn4" @click="showShareQr=true">测试海报</view> -->

                <template v-if="pageData.gameOver > 0">
                    <view class="btn4 p-re" v-if="vid == pageData.main_v_id">
                        <text class="size28">邀请好友</text>
                        <!-- #ifdef MP-WEIXIN -->
                        <button open-type="share" class="btn-contact"></button>
                        <!-- #endif -->
                    </view>
                    <view v-else>
                        <view class="btn4" v-if="pageData.missPeople > 0" @click="viewIsShow">我要参团</view>
                        <view class="btn4" v-else @click="toGoods(options.gid)">我也要玩</view>
                    </view>
                </template>
                <view class="btn4" v-else style="background: #999999">活动已结束</view>
            </view>
            <!-- 团购用户 end -->
            <view class="goods_info">
                <navigator url="/activityPage/group/playing_Method" hover-class="none">
                    <view class="navbar">
                        <view class="navbar_box flex-box align-center">
                            <view class="navbar_t">玩法</view>
                            <view class="navbar_c">开团/参团 - 邀请好友 - 满员发货 - 失败退款</view>
                            <text class="iconfont icon-xiangyouxiayiye"></text>
                        </view>
                    </view>
                </navigator>
                <mp-html
                    :content="gooodsData.content"
                    lazy-load
                    scroll-table
                    selectable
                    use-anchor
                    show-with-animation />
            </view>
            <!-- 底部按钮 start -->
            <!-- <footer class="footer_btn_box">
				<navigator url="javascript:;">
					<navigator url="/activityPage/join/i_join" class="btn2">我要加入</navigator>
				</navigator>
			</footer> -->
            <!-- 底部购买信息 start -->
            <view class="ftr_buy_info" v-show="isShow">
                <view class="cross_btn close_buy_info" @click="viewIsShow">
                    <text class="icon-guanbi iconfont" style="color: #999999"></text>
                </view>
                <view class="ftr_buy_info_goods flex-box">
                    <view class="ftr_buy_info_goods_thumb" onclick="$('.full_atlas').show();">
                        <image :src="$imgUrls(gooodsData.img)" mode="aspectFill"></image>
                    </view>
                    <view class="ftr_buy_info_goods_info flex">
                        <view class="goods_titles">
                            <text class="tag color3">{{ gooodsData.group_number }}人团</text>
                            <text>{{ gooodsData.name }}</text>
                        </view>
                        <view class="align-center flex-box">
                            <view class="ftr_buy_info_goods_price flex">
                                <view class="price2_num myPrice">{{ gooodsData.open_group_price }}</view>
                                <view>
                                    {{ gooodsData.full_price_name }}：
                                    <text class="myPrice">{{ gooodsData.full_price }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="ftr_buy_info_oper">
                    <view class="ftr_buy_info_oper_h">数量</view>
                    <view class="ftr_buy_info_oper_num">
                        <view class="ftr_buy_info_oper_btn minus disabled" data-type="minus">
                            <image
                                :src="staticUrl + '/images/minus_ico.png'"
                                v-if="v_input < 2"
                                class="minusBottomBox"
                                mode="aspectFit"></image>
                            <image
                                :src="staticUrl + '/images/minus2_ico.png'"
                                v-else
                                @click="minus"
                                class="minusBottomBox"
                                mode="aspectFit"></image>
                        </view>
                        <input type="number" name="" v-model="v_input" class="ftr_buy_info_oper_input" />
                        <view class="ftr_buy_info_oper_btn plus" data-type="plus">
                            <image
                                :src="staticUrl + '/images/plus2_ico.png'"
                                class="minusBottomBox"
                                @click="plus"
                                mode="aspectFit"></image>
                        </view>
                    </view>
                </view>
                <view class="btn3" @click="toOrder">确定</view>
            </view>
        </template>

        <view class="mask" v-show="isShow" @click="viewIsShow"></view>

        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>

        <!-- 分享海报 -->
        <SharePoster
            v-if="showShareQr"
            :myid="options.gid"
            type="4"
            :pageType="pageType"
            @closePoster="showShareQr = false"></SharePoster>
    </view>
</template>

<script>
    import { mapState } from 'vuex'
    import SharePoster from '../../components/sharePoster.vue'
    let that
    export default {
        components: {
            SharePoster
        },
        data() {
            return {
                showShareQr: false,

                isShow: false,
                v_input: 1,
                toTop: false,
                pageData: '',
                imgUrl: this.imgUrl,
                shopName: uni.getStorageSync('startUp').shopName,
                showModal: false, // 是否显示模态框
                staticUrl: this.staticUrl,
                options: '',
                pageType: '',
                gooodsData: ''
            }
        },
        onLoad(options) {
            that = this

            that.options = options
            that.options.gid = that.options.gid ? that.options.gid : that.options.goods_id
            that.pageType =
                '3&gid=' + that.options.gid + '&aid=' + that.options.aid + '&group_id=' + that.options.group_id
            that.getPageData()
        },
        onPageScroll(e) {
            if (e.scrollTop > 200) {
                this.toTop = true
            } else {
                this.toTop = false
            }
        },
        methods: {
            getPageData() {
                /**
                 * 参团购买页面获取数据
                 * **/
                that.$http
                    .post({
                        url: '/zzj_singleSaleApi/getPurchase',
                        data: {
                            act_id: that.options.aid,
                            goods_id: that.options.gid,
                            group_id: that.options.group_id
                        }
                    })
                    .then((res) => {
                        if (res.code == 100) {
                            that.pageData = res
                            that.gooodsData = res.data[0].list[0]
                            that.gooodsData.content = that.$common.richTxt(that.gooodsData.content).html
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: res.msg
                            })
                        }
                    })
            },
            toOrder() {
                uni.navigateTo({
                    url:
                        '/orderPage/order/createOrders?goods_id=' +
                        that.options.gid +
                        '&goods_num=' +
                        that.v_input +
                        '&act_id=' +
                        that.options.aid +
                        '&group_id=' +
                        that.options.group_id
                })
            },
            minus: function () {
                //減少數量
                this.v_input = parseInt(this.v_input) - 1
            },
            plus: function () {
                //增加數量
                this.v_input = parseInt(this.v_input) + 1
            },
            viewIsShow: function () {
                //打開底部工具欄
                if (parseInt(this.pageData.missPeople) < 1) {
                    uni.showToast({
                        icon: 'none',
                        title: '已经满员啦，自己开团也是一样的哦',
                        duration: 2000
                    })
                    return
                }

                let user = this.pageData.groupUsers.find((item) => item.v_id == this.vid)
                if (user) {
                    uni.showToast({
                        icon: 'none',
                        title: '一个团购只能参与一次哦',
                        duration: 2000
                    })
                    return
                }
                if (!this.vid) {
                    this.showModal = true
                } else {
                    this.isShow = !this.isShow
                }
            }
        },
        computed: {
            ...mapState(['vid', 'color', 'bid'])
        },
        onShareAppMessage(option) {
            return {
                title: that.gooodsData.name,
                desc: that.gooodsData.info,
                path:
                    '/pages/index/index?share_v_id=' +
                    this.vid +
                    '&pageType=3&gid=' +
                    that.options.gid +
                    '&aid=' +
                    that.options.aid +
                    '&group_id=' +
                    that.options.group_id,
                imageUrl: that.$imgUrls(that.gooodsData.img)
            }
        }
    }
</script>

<style scoped lang="scss">
    .closeBottomBox {
        width: 20upx;
        height: 20upx;
        margin: 10upx;
    }
    .minusBottomBox {
        width: 24upx;
        height: 24upx;
        margin: 16upx;
    }
    .ftr_buy_info_goods_thumb image {
        width: 100%;
        height: 100%;
    }
    .btn4 {
        margin-top: 80rpx;
    }
    .ftr_buy_info_goods_info .tag.color3 {
        align-items: flex-end;
        position: relative;
        width: auto;
        padding: 0 20rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin-left: 10rpx;
    }
    .shop {
        margin-bottom: 20rpx;
        .shop-logo {
            width: 40rpx;
            height: 40rpx;
            border-radius: 6rpx;
            margin-right: 12rpx;
        }
        .name {
            font-size: 32rpx;
        }
    }
    .page {
        padding-bottom: 129upx;
        .order_goods {
            border-radius: 0;
            margin-bottom: 30upx;
        }
    }
</style>
